import React from 'react';
import { Tag } from 'antd';
import _ from 'lodash';
import CreateForm from '@/components/CreateForm';
import constant from '@/const';

// 替换状态
const replaceStatusList = (list: any[], key: string) => {
  list.forEach(item => {
    if (key && item.hasOwnProperty(key) && item[key]) {
      item.hidden = item[key];
    }
  });
  return list;
};

export const getFormData = (that: any) => {
  const { submitLoading, exportLoading, first, second } = that.state;
  const formConfig = {
    submitLoading,
    exportLoading,
    config: [
      {
        id: 'date',
        type: 'daterange',
        options: {
          name: '选择日期',
          showTime: true,
          value: that.initDefaultDate(1),
          // allowClear: false,
          format: ['startDate', 'endDate'],
        },
      },
      {
        id: 'username',
        type: 'input',
        options: {
          name: '账户名',
          value: '',
          placeholder: '请输入账户名',
        },
      },
      {
        id: 'optType',
        type: 'select',
        options: {
          name: '操作类型',
          placeholder: '请选择操作类型',
          value: -1,
          allowClear: false,
          list: replaceStatusList(_.cloneDeep(constant.MEMBER_REVIEW_AUDIT_TYPE), 'agency'),
        },
      },
      {
        id: 'firstApprover',
        type: 'select',
        options: {
          name: '一审人',
          placeholder: '请选择一审人',
          value: '',
          allowClear: false,
          list: first,
        },
      },
      {
        id: 'secondApprover',
        type: 'select',
        options: {
          name: '二审人',
          placeholder: '请选择二审人',
          value: '',
          allowClear: false,
          list: second,
        },
      },
      {
        id: 'status',
        type: 'select',
        options: {
          name: '审核状态',
          placeholder: '请选择审核状态',
          value: -1,
          allowClear: false,
          list: constant.MEMBER_REVIEW_AUDIT_STATUS,
        },
      },
      // 用户类型 1代理 0会员
      {
        id: 'userType',
        type: 'input',
        options: {
          value: 1,
          hidden: true,
        },
      },
      // 时间类型 0申请时间，1一审时间，2二审时间
      {
        id: 'dateType',
        type: 'input',
        options: {
          value: 0,
          hidden: true,
        },
      },
      {
        id: 'submit',
        type: 'button',
        options: {
          name: '查询',
          type: 'primary',
        },
      },
      {
        id: 'reset',
        type: 'button',
        options: {
          name: '重置',
        },
      },
      {
        id: 'export',
        type: 'button',
        handle: that.exportExcel,
        options: {
          name: '导出',
          type: 'primary',
          auth: 'agent-review-export',
        },
      },
    ],
    requestList: that.requestList,
  };
  // 此处保存表单最初的默认值
  that.initDefaultFormParams({ formConfig });
  return formConfig;
};

// 公用头
const header = (that: any) => {
  const { step, visible } = that.state;
  return [
    {
      title: '操作',
      dataIndex: 'operates',
      hidden: visible && step === 1,
      render: (text: number, row: any) => {
        if (row.status !== 1 && row.status !== 5) {
          return (
            <Tag
              color="green"
              style={{ cursor: 'pointer' }}
              onClick={() => that.handleReviewInfo(row, true)}
            >
              查看
            </Tag>
          );
        }
        return (
          <Tag
            color="orange"
            style={{ cursor: 'pointer' }}
            onClick={() => that.handleReviewInfo(row, false)}
          >
            审核
          </Tag>
        );
      },
    },
    {
      title: '操作类型',
      dataIndex: 'optType',
      render: (text: number, row: any) => row.optDesc,
      // 注释原因 - 塞选条件可根据需求增加，数据方面若出现空，用户会认为是bug
      // render: (text: number) => {
      //   const data = constant.MEMBER_REVIEW_AUDIT_TYPE.filter(i => i.value === text);
      //   return data.length ? data[0].label : '--';
      // },
      width: 200,
    },
    {
      title: '操作修改前',
      dataIndex: 'optBeforeData',
      render: (text: string, row: any) => that.getOptData(text, row, 'optBeforeData'),
    },
    {
      title: '操作修改后',
      dataIndex: 'optAfterData',
      render: (text: string, row: any) => that.getOptData(text, row, 'optAfterData'),
    },
    {
      title: '账户名',
      dataIndex: 'username',
    },
    {
      title: '申请人',
      dataIndex: 'creator',
    },
    {
      title: '申请时间',
      dataIndex: 'createTime',
      formatTimeStamp: true,
    },
    {
      title: '一审人员',
      dataIndex: 'firstApprover',
    },
    {
      title: '二审人员',
      dataIndex: 'secondApprover',
    },
    {
      title: '审核状态',
      dataIndex: 'status',
      render: (text: number) => {
        const data = constant.MEMBER_REVIEW_AUDIT_STATUS.filter(i => i.value === text);
        return data.length ? data[0].label : '--';
      },
    },
  ];
};

export const getTableData = (that: any) => {
  const { pagination, submitLoading, selectedRowKeys, optType, list } = that.state;
  return {
    pagination,
    loading: submitLoading,
    bindKey: 'manageId',
    changePaginationCallBack: (param: any) => that.updatePagination(param, that.requestList),
    data: list || [],
    rowSelection: {
      selectedRowKeys,
      hideDefaultSelections: true,
      getCheckboxProps: (row: any) => ({ disabled: row.status !== 1 && row.status !== 5 }),
      onChange: (selectedRowKey: any) => that.changeState({ selectedRowKeys: selectedRowKey }),
    },
    tableTitle: () => (
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <CreateForm
          formConfig={{
            style: { paddingBottom: '8px' },
            noDrawer: true,
            config: [
              {
                id: 'optType',
                type: 'select',
                options: {
                  name: '批量操作',
                  placeholder: '请选择',
                  value: optType,
                  allowClear: false,
                  list: constant.MEMBER_REVIEW_CHECK_TYPE,
                },
              },
              {
                id: 'submit',
                type: 'button',
                options: {
                  name: '执行',
                  type: 'primary',
                  auth: 'agent-review-enabled',
                },
              },
            ],
            requestList: that.handleOperate,
          }}
        />
      </div>
    ),
    header: _.cloneDeep(header(that)),
  };
};

export const getModalData = (that: any) => {
  const {
    visible,
    optType,
    singleOptType,
    dataCenter,
    reviewLoading,
    step,
    selectedRowKeys,
  } = that.state;
  const { validator } = that.props;

  let footer = [
    {
      id: 'reset',
      name: '取消',
      auth: true,
      default: 'button',
      type: 'default',
      event: {
        click: that.handleCancel,
      },
    },
  ];
  constant.MEMBER_REVIEW_CHECK_TYPE.forEach(item => {
    const getFooter = (): void => {
      // @ts-ignore
      footer = [].concat(footer, [
        {
          id: 'submit',
          name: item.label,
          auth: 'agent-review-enabled',
          default: 'button',
          loading: reviewLoading,
          style: { background: item.color, borderColor: item.color },
          event: {
            click: that.handleBatchReview,
          },
        },
      ]);
    };
    if (step === 1 && item.value === optType) {
      getFooter();
    }
    if (step === 2 && item.value === singleOptType) {
      getFooter();
    }
  });

  const tableConfig =
    step === 2
      ? {}
      : {
          height: 400,
          loading: dataCenter.loading,
          // pagination: dataCenter,
          changePaginationCallBack: (param: any) => that.updateDataCenter(param),
          data: dataCenter.list,
          header: _.cloneDeep(header(that)),
          bindKey: 'manageId',
          rowSelection: {
            selectedRowKeys,
            hideDefaultSelections: true,
            getCheckboxProps: (row: any) => ({ disabled: row.status !== 1 && row.status !== 5 }),
            onChange: (selectedRowKey: any) =>
              that.changeState({ selectedRowKeys: selectedRowKey }),
          },
        };

  return {
    visible,
    width: 1000,
    title: '请输入审核备注',
    closeModalCallBack: that.handleCancel,
    formConfig: {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 0 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 },
        },
      },
      config: [
        {
          id: 'remark',
          type: 'textarea',
          options: {
            name: '',
            value: '',
            placeholder: '请输入审核备注',
          },
        },
      ],
      rules: {
        remark: [{ validator: validator.required }, { max: 45, message: '不可超过45位字符' }],
      },
    },
    tableConfig,
    footer,
  };
};
